<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
            initial-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <link rel="stylesheet" href="./static/css/weui.min.css">
    <link rel="stylesheet" href="./static/css/jx.css">
</head>
<body>
<div class="page button js_show">
    <div class="page__hd">
        <div class="page__title">费用清单</div>
    </div>
    <div class="weui-grids">
        <span class="weui-grid" style="padding: 5px;" id="briqi">
            <p class="weui-grid__label"><span>开始日期</span><i class="icon icon-ad"></i></p>
        </span>
        <span class="weui-grid" style="padding: 5px;" id="eriqi">
            <p class="weui-grid__label"><span>结束日期</span><i class="icon icon-ad"></i></p>
        </span>
        <span  class="weui-grid" style="padding: 5px" id="type">
            <p class="weui-grid__label"><span>类型</span><i class="icon icon-ad"></i></p>
        </span>
    </div>
    <div class="weui-cells" style="margin-top: 0">
        <div class="weui-cell">
            <div class="weui-media-box weui-media-box_text" style="width: 100%;padding: 5px;">
                <p class="weui-media-box__title" style="margin-bottom: 0;"><span>类别</span> <span style="color: #ff3b30;float: right">150块</span></p>
                <p style="color: #888888;font-size: 16px">项目名称:名称是啥...</p>
                <table class="weui-table weui-border-tb" style="color: #888888;font-size: 14px">
                    <thead>
                    <tr><th>数量</th><th>单位</th><th>单价</th><th>金额</th></tr>
                    </thead>
                    <tbody>
                    <tr><td>2</td><td>只</td><td>10</td><td>20</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-media-box weui-media-box_text" style="width: 100%;padding: 5px;">
                <p class="weui-media-box__title" style="margin-bottom: 0;"><span>类别</span> <span style="color: #ff3b30;float: right">150块</span></p>
                <p style="color: #888888;font-size: 16px">项目名称:名称是啥...</p>
                <table class="weui-table weui-border-tb" style="color: #888888;font-size: 14px">
                    <thead>
                    <tr><th>数量</th><th>单位</th><th>单价</th><th>金额</th></tr>
                    </thead>
                    <tbody>
                    <tr><td>2</td><td>只</td><td>10</td><td>20</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-media-box weui-media-box_text" style="width: 100%;padding: 5px;">
                <p class="weui-media-box__title" style="margin-bottom: 0;"><span>类别</span> <span style="color: #ff3b30;float: right">150块</span></p>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-media-box weui-media-box_text" style="width: 100%;padding: 5px;">
                <p class="weui-media-box__title" style="margin-bottom: 0;"><span>类别</span> <span style="color: #ff3b30;float: right">150块</span></p>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-media-box weui-media-box_text" style="width: 100%;padding: 5px;">
                <p class="weui-media-box__title" style="margin-bottom: 0;"><span>类别</span> <span style="color: #ff3b30;float: right">150块</span></p>
                <p style="color: #888888;font-size: 16px">项目名称:名称是啥...</p>
                <table class="weui-table weui-border-tb" style="color: #888888;font-size: 14px">
                    <thead>
                    <tr><th>数量</th><th>单位</th><th>单价</th><th>金额</th></tr>
                    </thead>
                    <tbody>
                    <tr><td>2</td><td>只</td><td>10</td><td>20</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" src="./static/js/weui.min.js"></script>
<script type="text/javascript" src="./static/js/zepto.min.js"></script>
<script type="text/javascript">
    var form = {
        briqi: {
            year: null,
            month: null,
            day: null,
        },
        eriqi: {
            year: null,
            month: null,
            day: null,
        },
        type:'',
    };
    var now = new Date();
    function search() {
        console.log(form);
        weui.alert(JSON.stringify(form));
    }
    $(function () {
        $("#type").on("click", function(){
            var vm = this;
            weui.picker([
                {label: '类型1', value: 1},
                {label: '类型2', value: 1},
                {label: '类型3', value: 3},
                {label: '类型4', value: 4,}
            ], {
                className: '',
                container: 'body',
                defaultValue: [form.type],// 默认选中
                onConfirm: function (result) {
                    form.type = result[0].value;
                    $(vm).find("span").html(result[0].label);
                    search();
                },
                id: 'type-select'
            });
        });

        $("#briqi").on("click", function () {
            var vm = this;
            weui.datePicker({
//                start: null, // 从今天开始
                end: new Date((new Date()).getTime() + 7 * 24 * 3600000),
                defaultValue: [form.briqi.year || now.getFullYear(), form.briqi.month || now.getMonth() + 1, form.briqi.day || now.getDate()],
                onConfirm: function (result) {
                    form.briqi = result[0].value + '-' + result[1].value + '-' + result[2].value;
                    $(vm).find("span").html(result[0].label + result[1].label + result[2].label);
                    search();
                },
                id: 'briqi-select'
            });
        });
        $("#eriqi").on("click", function () {
            var vm = this;
            weui.datePicker({
//                start: null, // 从今天开始
                end: new Date((new Date()).getTime() + 7 * 24 * 3600000),
                defaultValue: [form.eriqi.year || now.getFullYear(), form.eriqi.month || now.getMonth() + 1, form.eriqi.day || now.getDate()],
                onConfirm: function (result) {
                    form.eriqi = result[0].value + '-' + result[1].value + '-' + result[2].value;
                    $(vm).find("span").html(result[0].label + result[1].label + result[2].label);
                    search();
                },
                id: 'eriqi-select'
            });
        });
    });
</script>
</html>
